<template>
  <div ref="chinaMap" class="chinaMap" style="width: 50vw; height: 30vw" />
</template>
<script>
import '@/utils/echarts/map/js/china.js'
import * as echarts from 'echarts'
export default {
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      const mapcharts = this.$echarts.init(this.$refs.chinaMap)
      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function(ctx, shape) {
          const xAxisPoint = shape.xAxisPoint
          const c0 = [shape.x, shape.y]
          const c1 = [shape.x - 9, shape.y - 9]
          const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
          const c3 = [xAxisPoint[0], xAxisPoint[1]]
          ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
        }
      })
      const CubeRight = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function(ctx, shape) {
          const xAxisPoint = shape.xAxisPoint
          const c1 = [shape.x, shape.y]
          const c2 = [xAxisPoint[0], xAxisPoint[1]]
          const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
          const c4 = [shape.x + 18, shape.y - 9]
          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
      })
      const CubeTop = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        }

      })
      echarts.graphic.registerShape('CubeLeft', CubeLeft)
      echarts.graphic.registerShape('CubeRight', CubeRight)
      echarts.graphic.registerShape('CubeTop', CubeTop)
      const MAX = [6000, 6000, 6000, 6000, 6000, 5000, 4000, 3000, 2000, 4000, 3000, 2000]
      const VALUE = [2012, 1230, 3790, 2349, 1654, 1230, 3790, 2349, 1654, 3790, 2349, 1654]
      // 窗口尺寸改变
      window.addEventListener('resize', function() {
        mapcharts.resize()
      })

      // 绘制图表
      mapcharts.setOption({
        backgroundColor: '#fff',
        title: {
          text: '',
          top: 32,
          left: 18,
          textStyle: {
            color: '#000',
            fontSize: 24
          }
        },
        legend: {
          show: true,
          data: ['物业费', '车行收入'],
          color: ['#000', '#000']
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: 20,
          right: 40,
          bottom: '19%',
          top: 107,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['10月', '11月', '12月', '1月', '2月', '3月',
            '4月', '5月', '6月', '7月', '8月', '9月'],
          axisLine: {
            show: true,
            lineStyle: {
              color: '#000'
            }
          },
          offset: 20,
          axisTick: {
            show: false,
            length: 9,
            alignWithLabel: true,
            lineStyle: {
              color: '#000'
            }
          },
          axisLabel: {
            fontSize: 10
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#000'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: 16
          },
          boundaryGap: ['20%', '20%']
        },
        series: [{
          name: '总收入',
          type: 'custom',
          renderItem: function(params, api) {
            const location = api.coord([api.value(0), api.value(1)])
            return {
              type: 'group',
              children: [{
                type: 'CubeLeft',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: 'rgba(47,102,192,.27)'
                }
              }, {
                type: 'CubeRight',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: 'rgba(59,128,226,.27)'
                }
              }, {
                type: 'CubeTop',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: 'rgba(72,156,221,.27)'
                }
              }]
            }
          },
          data: MAX
        },
        {
          name: '物业费',
          type: 'custom',
          renderItem: (params, api) => {
            const location = api.coord([api.value(0), api.value(1)])
            return {
              type: 'group',
              children: [{
                type: 'CubeLeft',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#000'
                  },
                  {
                    offset: 1,
                    color: '#49BEE5'
                  }
                  ])
                }
              }, {
                type: 'CubeRight',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#3B80E2'
                  },
                  {
                    offset: 1,
                    color: '#49BEE5'
                  }
                  ])
                }
              }, {
                type: 'CubeTop',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#000'
                  },
                  {
                    offset: 1,
                    color: '#000'
                  }
                  ])
                }
              }]
            }
          },
          data: VALUE
        },
        {
          name: '车行收入',
          type: 'bar',
          label: {
            normal: {
              show: true,
              position: 'top',
              formatter: (e) => {
                switch (e.name) {
                  case '10kV线路':
                    return VALUE[0]
                  case '公用配变':
                    return VALUE[1]
                  case '35kV主变':
                    return VALUE[2]
                  case '水':
                }
              },
              fontSize: 16,
              color: '#000',
              offset: [4, -25]
            }
          },
          itemStyle: {
            color: 'transparent'
          },
          data: MAX
        }]
      })
    }
  }
}
</script>
<style>
</style>
